import React from "react";

import { storiesOf } from "@storybook/react";
import { text, select } from "@storybook/addon-knobs";
// import { withSmartKnobs } from 'storybook-addon-smart-knobs'

import Alert from ".";

const boolVariants = {
  true: true,
  false: false,
};

const typeVariants = {
  success: "success",
  error: "error",
  info: "info",
  warning: "warning",
};

storiesOf("Alert", module)
  .add("Alert", () => (
    <div className='flex items-baseline'>
      <Alert
        type={select("Type", typeVariants, "info")}
        visible={select("Visible", boolVariants, true)}
        message={text('Message', 'Informational Notes')}
        description={text('Description', 'Additional description and information about copywriting.')}
        closable={select("Closable", boolVariants, true)}
      // onClick={() => alert('click')}
      />
    </div>
  ));
